import React from 'react'
import { Button, Col, Form, Icon, Input, Row } from 'antd'
import styles from './ProcessTypeAdvancedSearchForm.css'

const FormItem = Form.Item


class ProcessTypeAdvancedSearchForm extends React.Component {
  state = {
    expand: false,
  };


  // To generate mock Form.Item
  getFields() {
    const count = this.state.expand ? 10 : 6
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    }
    const children = []
    for (let i = 0; i < 7; i++) {
      children.push(
        <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
          <FormItem {...formItemLayout} label={`Field ${i}`}>
            {getFieldDecorator(`field-${i}`)(
              <Input placeholder="placeholder" />
            )}
          </FormItem>
        </Col>
      )
    }
    return children
  }


  toggle = () => {
    const { expand } = this.state
    this.setState({ expand: !expand })
  };
  handleReset = () => {
    this.props.form.resetFields()
  };

  handleSearch = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
    })
  };

  render() {
    return (
      <Form
        className="ant-advanced-search-form"
        onSubmit={this.handleSearch}
      >
        <Row gutter={40}>{this.getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">搜索</Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              清除
            </Button>
            <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
              {this.state.expand ? '关闭' : '展开'}  <Icon type={this.state.expand ? 'up' : 'down'} />
            </a>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Form.create()(ProcessTypeAdvancedSearchForm)
